<div ng-if="!$ctrl.isSelect" class="mb-3" ng-init="$ctrl.initData()">
    <label class="form-label" ng-if="$ctrl.isShowTitle=='true'" ng-bind="$ctrl.title"></label>
    <div ng-switch="$ctrl.type.toLowerCase()">
        <div ng-switch-when="custom">
            <!--custom-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text" ng-model="$ctrl.stringValue"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="datetime">
            <!--datetime-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.type)" type="datetime-local" ng-model="$ctrl.dateObj"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="date">
            <!--date-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.type)" type="date" ng-model="$ctrl.dateObj"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="time">
            <!--time-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}"
                ng-change="$ctrl.updateStringValue($ctrl.type)" type="time" ng-model="$ctrl.dateObj"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="duration">
            <!--duration-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text" ng-model="$ctrl.stringValue"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="phonenumber">
            <!--phonenumber-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="tel" ng-model="$ctrl.stringValue"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="integer|double|currency">
            <!-- Number -->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="number" ng-model="$ctrl.doubleValue"
                placeholder="{{$ctrl.title}}" />
            <label class="form-label" ng-bind="$ctrl.doubleValue | currency:''"></label>
        </div>
        <div ng-switch-when="text">
            <!--Text-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text" ng-model="$ctrl.stringValue"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="html">
            <!--Html-->
            <trumbowyg options="{}" ng-model="$ctrl.stringValue"></trumbowyg>

            <!-- <quill-editor content="$ctrl.stringValue"></quill-editor> -->
        </div>
        <div ng-switch-when="multilinetext">
            <!--TextArea-->
            <textarea class="form-control form-control-sm {{$ctrl.inputClass}}" rows="5" ng-model="$ctrl.stringValue"
                placeholder="{{$ctrl.title}}"></textarea>
        </div>
        <div ng-switch-when="emailaddress">
            <!--Email-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="email" ng-model="$ctrl.stringValue"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="password">
            <!--Password-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="password"
                ng-model="$ctrl.stringValue" placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="url">
            <!--Url-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="url" ng-model="$ctrl.stringValue"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="imageurl">
            <!--ImageUrl-->
            <input placeholder="{{$ctrl.title}}" class="form-control form-control-sm {{$ctrl.inputClass}}" type="url"
                ng-model="$ctrl.stringValue" placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="creditcard">
            <!--CreditCard-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text" ng-model="$ctrl.stringValue"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="postalcode">
            <!--PostalCode-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="text" ng-model="$ctrl.stringValue"
                placeholder="{{$ctrl.title}}" />
        </div>
        <div ng-switch-when="upload">
            <!--upload-->
            <custom-image header="'Image'" type="'Posts'" folder="'Attributes'" src-url="$ctrl.stringValue"
                src="$ctrl.stringValue" auto="'true'"></custom-image>
        </div>
        <div ng-switch-when="color">
            <!--Color-->
            <input class="form-control form-control-sm {{$ctrl.inputClass}}" type="color" value="{{$ctrl.stringValue}}"
                ng-model="$ctrl.stringValue" placeholder="{{$ctrl.title}}" />
            <input class="form-control form-control-sm" type="text" ng-model="$ctrl.stringValue" />
        </div>
        <div ng-switch-when="boolean">
            <!--Boolean-->

            <input class="{{$ctrl.inputClass}}" type="checkbox" placeholder="{{$ctrl.title}}"
                ng-change="$ctrl.updateStringValue($ctrl.type)" ng-model="$ctrl.booleanValue"
                ng-checked="$ctrl.booleanValue" />
        </div>
        <div ng-switch-when="icon">
            <mix-select-icons prefix="'fab'" options="$ctrl.icons" data="$ctrl.stringValue"></mix-select-icons>
        </div>
        <div ng-switch-when="videoyoutube">
            <youtube-editor code="$ctrl.stringValue"></youtube-editor>
        </div>
        <div ng-switch-when="tuieditor">
            <tui-editor content="$ctrl.stringValue"></tui-editor>
        </div>
        <div ng-switch-when="reference">
            <!-- Referrence -->
            <a ng-if="$ctrl.parentId"
                href="/portal/mix-database-data/details?dataId=default&mixDatabaseId={{$ctrl.referenceId}}&parentType={{$ctrl.parentType}}&parentId={{$ctrl.parentId}}"
                class="btn btn-sm btn-primary px-4 mt-3 ng-scope">
                <i class="fas fa-plus"></i> Add
            </a>
            <mix-database-data-values on-update="$ctrl.updateRefData(data)" on-delete="$ctrl.removeRefData(data)"
                header="$ctrl.title" data="$ctrl.refData">
            </mix-database-data-values>
        </div>
    </div>
</div>
<div ng-if="$ctrl.isSelect" class="mb-3">
    <label class="form-label" ng-if="$ctrl.isShowTitle" ng-bind="$ctrl.title"></label>
    <mix-select-icons ng-if="$ctrl.type==icon" options="$ctrl.options" data="$ctrl.booleanValue"></mix-select-icons>

    <select ng-if="$ctrl.type!=icon" class="form-select form-control" ng-model="$ctrl.booleanValue">
        <option ng-repeat="item in $ctrl.options track by $index" ng-value="item.value">
            {{item.value}}
        </option>
    </select>
    <br />
</div>